//Fonts
$font-family: "OpenSans", sans-serif;
$font-family-header: 'OpenSans', sans-serif;

// COLORS

$bt-brand-primary: #6633ff;
$bt-brand-primary-light: lighten($bt-brand-primary,40);
$bt-brand-primary-lighter: lighten($bt-brand-primary,70);

$bt-brand-primary-dark: #17103a;
$bt-brand-primary-dark-desaturated: #202040;
$bt-brand-primary-dark-desaturated-light: #38386d;
$bt-brand-primary-dark-desaturated-lighter: #5d60cc;


$bt-brand-faint: #eff0ef;
$bt-brand-faint-alt: #eff0ef;
$bt-brand-faint-hover: #eee7f6;


$bt-brand-tertiary: #f18e7f;
$bt-brand-secondary: #00a696;
$bt-brand-secondary-faint: #2d9189;
$bt-brand-secondary-light: lighten($bt-brand-secondary,40);
$bt-brand-secondary-hover: darken($bt-brand-secondary, 5);
$bt-brand-secondary-active: $bt-brand-secondary-hover;


$bt-brand-red: #f2576e;

//Body
$body-text-faint: #717186;
$body-text: #43424f;
$header-color: #38386d; // for headers and labels
$link-color: $bt-brand-secondary-faint; // for headers and labels
$bt-link-color: $bt-brand-secondary-faint; // for headers and labels
$bt-link-color-hover: darken($bt-brand-secondary-faint,10); // for headers and labels

//Navbar
$nav-link-color: $header-color; // navbar link
$nav-link-color-hover: $bt-brand-primary; //
$nav-link-color-active: $bt-brand-primary;
$navbar-height: 5rem;
$navbar-background: transparent;
$nav-icon-color: $bt-brand-secondary;

// Input
$bt-input-border: #d9d9e9;
$bt-input-border-active: $bt-brand-primary;
$bt-input-background: white;




$alert-danger-bg: $bt-brand-red;
$alert-danger-border: $bt-brand-red;
$alert-danger-text: rgb(255, 255, 255);

$body-bg: $bt-brand-faint-alt;


$bt-gradient-text: $body-text;
$bt-gradient-start: $bt-brand-faint-alt;
$bt-gradient-end: #fff;

$bt-code-background: #2b273c;
$bt-switch-active:$header-color;


// Code help e.g. installing the SDK
$btn-code-button-background-hover: darken($bt-brand-faint-alt,2);
$btn-code-button-background: $bt-brand-faint-alt;
$btn-code-button-border: $bt-brand-faint-alt;
$btn-code-button-color: $header-color;
$btn-code-button-color-alt: $bt-brand-tertiary;


//Nav

// BORDER RADIUS
$default-border-radius: 8px;
$btn-border-radius: 8px;

// INPUT
$input-border-radius: 0px;
$input-height: 40px;
$input-line-height: 25px;
$input-font-size: inherit;
$input-font-weight: 400;
$input-border-color: rgb(224, 224, 224);
$input-placeholder-color: rgb(224, 224, 224);
$input-border-highlight-color: $bt-brand-primary-light;

$pagination-color: #333;




//BUTTONS
$btn-height: 44px;
$btn-secondary-bg: rgb(240, 240, 240);
$btn-default-color: white;
$hover-bg: rgb(240, 240, 240);
$hover-color: inherits;

//Panel
$panel-heading-height: 50px;
$panel-bg: #fff;
$panel-heading-bg: #f7f7f7;
$panel-heading-color: $header-color;
$panel-heading-border: 1px solid #f1f1f1;

//
$panel-icon-color: $bt-brand-primary;
$panel-icon-border-color: #ddd;
$panel-icon-background-color: #fff;


//Panel Dark
$panel-alt-heading-bg: #fff;
$panel-alt-heading-color: #fff;

//TABS
$tab-inactive-color: $body-text;
$tab-active-background: $bt-brand-faint;
$tab-inactive-background: $bt-brand-faint;

$tab-line-color: $bt-brand-primary;

$tab-active-color: $header-color;

//SCAFFOLDING
$mobile-portrait: 320px;
$mobile-landscape: 480px;
$tablet-portrait: 768px;
$tablet-landscape: 1024px;

//GRID
$input-padding-x: .75rem !default;
$input-padding-y: 1rem !default;

//MODALS
$modal-backdrop-bg: rgba(0, 0, 0, 0.870588);
$modal-header-background: $bt-brand-faint-alt;

$modal-header-color: $header-color;
$modal-header-border-width: 0;
$border-radius-default: 8px;
//TRANSITIONS
$button-transition: background-color 400ms cubic-bezier(0.23, 1, 0.32, 1);
//Hero
$hero-bg:white;

$toast-bg:rgba(0,0,0,.9);
$toast-color:white;

$bold: 400;

$card-default: 0 6px 13px 0 rgba(34,53,74,0.10);


$aside-base-background: $bt-brand-faint-alt;
$aside-logo: $bt-brand-primary-dark-desaturated-lighter;
// active project and environment
$aside-base-highlight: $bt-brand-primary-dark-desaturated-lighter;
$aside-base-highlight-color: white;
// active project and environment
$aside-base-link: $bt-brand-faint-alt;
$aside-base-link-color: $body-text-faint;
// Environment link
$aside-nav-color:$body-text;
$aside-nav-inactive-color:transparentize($body-text, 0.25);
$aside-nav-inactive-hover-color:transparentize($header-color, 0.25);
$aside-nav-hover:$header-color;
// Background of other links e.g. acreate environment/organisation
$aside-link-alt-color:$bt-brand-secondary-faint;
$aside-add-color:white;




//Aside
$aside-width:330px;

// Shadows
$aside-box-shadow: 0 6px 13px 0 transparentize($bt-brand-primary-dark-desaturated-light,.75); // Box shadow right menu
$aside-project-link-active-box-shadow: none;


// Backgrounds
$aside-bg:$aside-base-background;  // left aside menu
$aside-left-bg:$bt-brand-primary-dark; // main aside menu
$aside-left-color:white; // main aside menu
$aside-left-color-active:white; // main aside menu
$aside-nav-collapse:darken($aside-base-background,2); // selected environment background

// project link
$aside-project-link-color: $aside-base-link-color;
$aside-project-link: $aside-base-link;
// project link active
$aside-project-link-active:$aside-base-highlight;
$aside-project-link-color-active:$aside-base-highlight-color;


// Active environment link
$aside-nav-active:$aside-base-highlight;
$aside-nav-active-color:$aside-base-highlight-color;
$aside-nav-collapse-border:$aside-base-highlight;


// Aside scrollbar
$bt-scrollbar-track: rgba(243,236,255,0.1);
$bt-scrollbar-thumb: rgba(243, 236, 255, 0.2);
$bt-scrollbar-thumb-hover: rgba(243,236,255,0.6);
